<template>
  <el-dialog
    title="执法人员"
    :visible.sync="dialogVisible"
    custom-class="custom-dialog"
    width="50%"
    :before-close="handleClose"
  >
    <el-table
      border
      size="small"
      :data="tableData"
      height="450px"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="60" />
      <el-table-column prop="userId" label="用户id" />
      <el-table-column prop="userName" label="登录名" />
      <el-table-column prop="nickName" label="用户名" />
      <el-table-column prop="phonenumber" label="联系电话" />
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button
            class="table-inner-btn"
            type="text"
            size="mini"
            @click="addObject(scope.row)"
            >添加</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- {{toSonData}} -->
    <div class="pagination-panel btn_two">
      <el-button type="primary" class="addList" @click="addList"
        >批量添加</el-button
      >
      <div>
        <Pagination
          :total="query.total"
          :page.sync="query.pageNum"
          :limit.sync="query.pageSize"
          @pagination="getData"
        />
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { getPatrolUser, addPatrolUser, getUserList } from "@/api/system/dept";
import Pagination from "@/components/Pagination";
export default {
  components: {
    Pagination
  },
  data() {
    return {
      tableData: [
        {
          key1: 1,
          key2: 1,
          key3: "崇庆街道",
          key4: "崇州会治理【800053】号",
          key5: "2021-03-02  12：23：00",
          key6: "河道管理",
          key7: "水污染"
        }
      ],

      newArr: [],
      multipleSelection: [],
      query: {
        total: 0,
        pageNum: 1,
        pageSize: 10
      },
      deptId: ""
    };
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    dept_id: {
      type: String,
      default: ""
    }
  },
  watch: {
    dept_id(oldVal, newVal) {
      if (oldVal !== newVal) {
        this.getData();
      }
    }
  },
  methods: {
    handleClose() {
      this.$emit("closeDialog");
      this.$emit("threeTypeMsg");
    },

    addList() {
      if (this.multipleSelection.length == 0) {
        this.$message.warning("请选择你要添加的内容");
      } else {
        this.multipleSelection.forEach(item => {
          item.deptId = this.dept_id;
        });
        addPatrolUser(this.multipleSelection).then(res => {
          if (res.code == 200) {
            this.$message.success("添加成功");
            this.handleClose();
          }
        });
      }
    },

    getData() {
      this.query.deptId = this.dept_id;
      getUserList(this.query).then(res => {
        let { rows, code } = res;
        if (code == 200) this.tableData = rows;
        this.query.total = res.total;
      });
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    addObject(val) {
      val.deptId = this.dept_id;
      let arr = [];
      arr.push(val);
      addPatrolUser(arr).then(res => {
        if (res.code == 200) {
          this.$message.success("添加成功");
          arr = [];
          this.handleClose();
        }
      });
    }
  },
  created() {
    this.getData();
  }
};
</script>
<style lang="scss" scoped>
.btn_two {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .addList {
    height: 38px;
  }
}
.overFlagBox1 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.overFlagBox1 .overFlagBox1_Img {
  width: 16px;
  height: 16px;
  margin-right: 5px;
}
</style>
